// useEffect
// 作用: 为react组件提供副作用处理
// 清理副作用
// 1. hook实现一个同样的定时器
// 2. useEffect做一个同样的清理

// useEffect如何清除副作用？
// useEffect第一个回调函数的末尾return一个新的函数 在这个新的函数中执行副作用的清理动作

// useEffect副作用函数的执行时机？
// 1. 组件销毁时 副作用函数会自动执行
// 2. 组件更新时 下一次的useEffect副作用函数执行之前 先执行清理函数

//未加清理函数时： count变化 -> 副作用函数执行 -> setInterval执行 -> 定时器累加

//加上清理函数时： count变化 -> 执行清理副作用的函数 -> 上一次的定时器清除掉 -> 副作用函数执行 -> setInterval执行

import { useEffect, useState } from "react"


const App = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => {
      // 用来清理副作用的事情
      clearInterval(timerId)
    }
  }, [count])
  return (
    <div>
      {count}
    </div>
  )
}

export default App